<template>
  <div class="leading-relaxed">
    <!-- 博客网站 Logo Begin -->
    <KoiLogo></KoiLogo>
    <!-- 博客网站 Logo End -->

    <div class="m-b-50px">
      <el-row :gutter="50">
        <!-- 左侧 Begin -->
        <el-col :xl="16" :lg="16" :md="15" :sm="24" :xs="24" class="<lg:m-b-40px">
          <!-- 联系我 Begin -->
          <div class="w-100% flex flex-col">
            <div class="w-100% h-460px <sm:h-260px overflow-hidden">
              <el-image
                :src="articleZeroUrl"
                fit="cover"
                class="w-100% h-100% hover:transform-scale-102 transition-all duration-600 ease-in-out"
              >
                <template #error>
                  <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
                </template>
              </el-image>
            </div>
            <!-- 弹幕 Begin -->
            <Danmaku ref="danmusRef" v-model:danmus="danmusList" useSlot loop isSuspend :channels="8" :speeds="80" class="w-100% h-360px <sm:h-260px m-t--360px <sm:m-t--260px">
              <template #dm="{ danmu }">
                <div class="flex flex-items-center flex-justify-center bg-[rgba(0,0,0,0.5)] p-l-2px p-r-10px p-y-1px rounded-22px">
                  <el-image
                    :src="danmu.avatar"
                    fit="cover"
                    class="w-23px h-23px rounded-full border-solid border-2px border-[--el-color-primary-light-6]"
                  >
                    <template #error>
                      <el-image
                        src="https://pic4.zhimg.com/v2-702a23ebb518199355099df77a3cfe07_b.webp"
                        fit="cover"
                        class="w-23px h-23px rounded-full border-solid border-2px border-[--el-color-primary-light-6]"
                      ></el-image>
                    </template>
                  </el-image>
                  <div class="m-l-5px text-14px text-white">{{ danmu.content }}</div>
                </div>
              </template>
            </Danmaku>
            <!-- 弹幕 End -->
            <div class="m-y-20px text-#333 dark:text-#D8D8D8 text-40px font-700 capitalize text-center" style="font-family: 'Open Sans', sans-serif;">Contact Us</div>
            <div class="m-b-20px text-#727272 dark:text-#D8D8D8 text-14px text-center">
              <section>
                  <div class="text-#333 dark:text-#D8D8D8 text-26px font-bold">我是谁？</div>
                  <p>大家好！我是<strong>[于心]</strong>，一名热衷于探索<strong>[前后端开发]</strong>的技术爱好者/创作者/研究者。我拥有<strong>[5]</strong>年的经验，在此期间积累了丰富的知识，并且乐于分享我的见解和发现。</p>
              </section>

              <section>
                  <div class="text-#333 dark:text-#D8D8D8 text-26px font-bold">为什么有这个博客？</div>
                  <p>在这个快节奏的世界里，信息爆炸却难以筛选出真正有价值的内容。因此，我创建了这个博客，希望能够成为一片净土，专注于深入探讨<strong>[相关技术]</strong>，为那些渴望学习新技能、解决问题或者只是想了解更多信息的人们提供帮助。</p>
              </section>

              <section>
                  <div class="text-#333 dark:text-#D8D8D8 text-26px font-bold">我们聊些什么？</div>
                  <p>这里的文章涵盖了从基础概念到高级技巧的各种话题，包括但不限于：</p>
                  <div>
                      <div>[前后端代码]</div>
                      <div>[开发工具]</div>
                      <div>[面试技巧/文档]</div>
                      <div>[博客/技术网站]</div>
                      <div>[开源项目]</div>
                  </div>
                  <p>无论你是初学者还是行业专家，都能在这里找到适合自己的内容。我会尽量保持文章简洁易懂，同时也不失深度和技术性。</p>
              </section>

              <section>
                  <div class="text-#333 dark:text-#D8D8D8 text-26px font-bold">我的写作风格</div>
                  <p>我喜欢用一种轻松愉快的方式讲述复杂的话题，让每个人都能轻松上手。你可以期待看到既有教育意义又充满趣味性的文章，偶尔也会夹杂一点幽默感！</p>
              </section>

              <section>
                  <div class="text-#333 dark:text-#D8D8D8 text-26px font-bold">如何参与？</div>
                  <p>如果你对某个话题特别感兴趣，或者有任何疑问，欢迎随时在评论区留言。我也非常期待听到你们的想法和建议！别忘了收藏我们的网站地址，这样你就不会错过最新的文章更新了。</p>
              </section>

              <section>
                  <div class="text-#333 dark:text-#D8D8D8 text-26px font-bold">加入我们吧！</div>
                  <p>让我们一起踏上这段充满发现和交流的旅程。感谢你选择加入我的博客社区，期待与你共同成长！</p>
              </section>
            </div>
            <div class="row-title flex flex-items-center flex-justify-center m-t-40px m-b-40px w-100%">
              <div
                class="col-title capitalize text-center text-22px text-#333 dark:text-#D8D8D8 font-700 tracking-1px"
                style="font-family: 'Open Sans', sans-serif"
              >
                Please enter a message
              </div>
            </div>
            <div>
              <div class="flex flex-justify-center">
                <KoiUploadImage v-model:imageUrl="contactForm.avatar" disabled>
                  <template #content>
                    <el-icon><Avatar /></el-icon>
                    <span>请上传头像</span>
                  </template>
                  <template #tip>图片最大为 3M</template>
                </KoiUploadImage>
              </div>
              <div class="text-12px text-center m-y-10px text-#727272 dark:text-#D8D8D8">温馨提示：输入QQ号后，自动获取QQ头像和QQ昵称！</div>
              <div class="flex w-100% gap-60px">
                <input type="text" placeholder="QQ Number *" v-model="contactForm.qq" @input="getQQApi" class="m-b-30px flex-1 text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
                <input type="text" placeholder="QQ NickName *" v-model="contactForm.nickName" @input="getQQApi" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
              </div>
              <div class="flex w-100%">
                <input type="text" placeholder="Custom Avatar *" v-model="contactForm.avatar" @input="getQQApi" class="m-b-30px flex-1 text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
              </div>
              <div class="w-100% flex">
                <textarea placeholder="Your Message *" rows="7" v-model="contactForm.content" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif"></textarea>
              </div>
              <div class="flex flex-justify-between">
                <el-popover
                  :width="385"
                  trigger="hover"
                >
                  <template #reference>
                    <el-button circle class="text-16px">😊</el-button>
                  </template>
                  <div class="text-26px flex flex-wrap">
                    <div v-for="(item, index) in emojiList" :key="index" @click="handleEmoji(item)">{{ item }}</div>
                  </div>
                </el-popover>
                <el-button
                  class="uppercase tracking-1px w-150px h-45px rounded-0 text-12px text-#fff hover:text-#fff font-500 bg-[--el-color-primary] hover:bg-[--el-color-primary]"
                  @click="handleConfirm"
                >
                  <div style="font-family: 'Roboto', sans-serif">Send Message</div>
                </el-button>
              </div>
            </div>
          </div>
          <!-- 联系我 End -->
        </el-col>
        <!-- 左侧 End -->

        <!-- 右侧 Begin -->
        <KoiRight></KoiRight>
        <!-- 右侧 End -->
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import KoiLogo from "@/views/logo/index.vue";
import KoiRight from "@/views/home/components/Right.vue";
import { ref, onMounted } from "vue";
import { koiMsgSuccess, koiMsgWarning, koiMsgError } from "@/utils/koi.ts";
// import { getQQMessage } from "@/api/blog/qq/index.ts";
import { list, add } from "@/api/blog/contact/index.ts";
import errorUrl from "@/assets/images/error/404.png";
import Danmaku from 'vue3-danmaku';
import { ElLoading } from "element-plus";
import useCommentStore from "@/stores/modules/comment.ts";

const commentStore = useCommentStore();
const articleZeroUrl = "https://pic1.zhimg.com/70/v2-4cddafa8b6cc09cc098aa283e5c994a4_1440w.avis?source=172ae18b&biz_tag=Post";
const danmusRef = ref();
// danmusList 默认必须有值
const danmusList = ref<any>([{
  avatar: "https://pic4.zhimg.com/v2-702a23ebb518199355099df77a3cfe07_b.webp",
  content: "帅帅帅！"
}]);

// 显示弹幕需要先下载弹幕组件：pnpm install vue3-danmaku --save
/** 留言数据查询 */
const handleList = async () => {
  try {
    // 重置数据
    danmusList.value = [];
    const res: any = await list();
    danmusList.value = res.data;
  } catch (error) {
    console.log(error);
    koiMsgError("数据查询失败，请刷新重试🌻");
  }
};

onMounted(() => {
  handleList();
  handleContactValue();
});

const contactForm = ref<any>({
  qq: "",
  nickName: "",
  avatar: "",
  content: ""
});

/** 重置表单 */
const resetContactForm = () => {
  contactForm.value = {
    qq: "",
    nickName: "",
    avatar: "",
    content: ""
  }
};

/** 根据QQ号获取昵称和头像信息 */
const getQQApi = async () => {
  if (contactForm.value.qq.length === 0) {
    koiMsgError("请输入正确的QQ号！");
    return;
  }
  // 判断QQ号的长度
  if (contactForm.value.qq.length < 5) {
    // 如果长度小于5，QQ号不完整，返回错误信息
    koiMsgError("请输入正确的QQ号！");
    return;
  }
  // const res: any = await getQQMessage(contactForm.value.qq);
  // if (res.code != 200) {
  //   koiMsgError("获取QQ信息失败，请检查网络！");
  //   return;
  // };
  
  // const { name, imgurl } = res;
  // contactForm.value.nickName = name;
  // contactForm.value.avatar = imgurl;

  contactForm.value.avatar = `http://q.qlogo.cn/headimg_dl?dst_uin=${contactForm.value.qq}&spec=640&img_type=jpg`;
  commentStore.setQq(contactForm.value.qq);
  commentStore.setAvatar(contactForm.value.avatar);
  commentStore.setNickName(contactForm.value.nickName);

  if (contactForm.value.avatar.length === 0) {
    koiMsgError("头像信息获取失败，请自行上传！");
    return;
  }
  if (contactForm.value.nickName.length === 0) {
    koiMsgError("昵称信息获取失败，请自行填写！");
    return;
  }
};

/** 网站表单默认值 */
const handleContactValue = () => {
  contactForm.value.qq  = commentStore.qq;
  contactForm.value.avatar = commentStore.avatar;
  contactForm.value.nickName = commentStore.nickName;
};

/** 提交 */
const handleConfirm = async () => {
  if (contactForm.value.qq.length === 0) {
    koiMsgWarning("请输入正确的QQ号！");
    return;
  }
  if (contactForm.value.avatar.length === 0) {
    koiMsgWarning("请上传头像！");
    return;
  }
  if (contactForm.value.nickName.length === 0) {
    koiMsgWarning("请填写昵称！");
    return;
  }
  if (contactForm.value.content.length === 0) {
    koiMsgWarning("请输入留言内容！");
    return;
  }

  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)"
  });

  try {
    await add(contactForm.value);
    koiMsgSuccess("留言成功🌻");
    commentStore.setQq(contactForm.value.qq);
    commentStore.setAvatar(contactForm.value.avatar);
    commentStore.setNickName(contactForm.value.nickName);
    resetContactForm();
    handleContactValue();
    handleList();
    loading.close();
  } catch (error) {
    console.log(error);
    loading.close();
    koiMsgError("留言失败，请刷新重试🌻");
  }

};

const emojiList = ref<any>([
  "😀",
  "😄",
  "😊",
  "😁",
  "😂",
  "🙂",
  "🥰",
  "😘",
  "😗",
  "😚",
  "🤭",
  "🤫",
  "🤔",
  "🤪",
  "🤐",
  "😐️",
  "🤑",
  "😴",
  "😑",
  "😷",
  "😵‍💫",
  "🥳",
  "😎",
  "😭",
  "😱",
  "🤬",
  "💩",
  "🤡",
  "👻",
  "💖",
  "💔",
  "💢",
  "🫰",
  "🤞",
  "👊",
  "👎️",
  "👏",
  "🤝",
  "💪",
  "🤙",
  "👍️",
  "🤝",
  "🐽",
  "🐻",
  "🦄",
  "🕊️",
  "🏵️",
  "💐",
  "🍉",
  "🧀",
  "🍡",
  "🦀",
  "🦐",
  "🦞",
  "☕️",
  "🍻",
  "☃️",
  "🚫",
  "🏀",
  "🎖️"
]);

const handleEmoji = (emoji?: any) => {
  contactForm.value.content += emoji;
};
</script>

<style lang="scss" scoped>
</style>
